<template>
  <div style="padding: 20px;height: 670px">
    <t-card style="height: 670px">
      <t-card shadow="never" style="width: 1320px">
        <el-form :inline="true" :model="car2">
          <t-button theme="primary" size="large" style="width: 80px;" @click="addRow()">添加新车</t-button>
          &nbsp;
          <t-button theme="primary" size="large" variant="outline" @click="findByCondition()" plain>查询</t-button>
          &nbsp;
          <t-button theme="primary" size="large" variant="dashed" @click="car2={}" plain>清空</t-button>

          <el-form-item label="业主Id:" label-width="60px">
            <el-input v-model="car2.ownerId" filterable style="width: 120px" placeholder="请输入业主Id"></el-input>
          </el-form-item>
          <el-form-item label="车牌号:" label-width="60px">
            <el-input v-model="car2.carNum" filterable style="width: 120px" placeholder="请输入车牌号"></el-input>
          </el-form-item>
          <el-form-item label="汽车品牌:" label-width="75px">
            <el-input v-model="car2.carBrand" filterable style="width: 130px" placeholder="请输入汽车品牌"></el-input>
          </el-form-item>
          <el-form-item label="汽车型号:" label-width="75px">
            <el-input v-model="car2.carType" filterable style="width: 130px" placeholder="请输入汽车型号"></el-input>
          </el-form-item>
          <el-form-item label="车辆状态:" label-width="75px">
            <el-select v-model="car2.carStatus" placeholder="请选择" style="width: 100px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="time">
          <el-form-item label="要进出场车辆车牌号:">
            <el-input v-model="time.carNum" filterable style="width: 130px" placeholder="请输入车牌号"></el-input>
          </el-form-item>
          &ensp;
          <t-button theme="primary" size="large" @click="setTime()" plain>设置进场时间</t-button>
          &ensp;
          <el-date-picker v-model="time.inTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          &ensp;
          <t-button theme="primary" variant="outline" size="large" @click="setTime()" plain>设置出场时间</t-button>
          &ensp;
          <el-date-picker v-model="time.outTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form>
      </t-card>
      <br/>
      <t-card shadow="never" style="width: 1320px">
        <el-table :data="cars" border style="height:360px;">
          <el-table-column prop="carId" label="车辆id" align="center">
          </el-table-column>
          <el-table-column prop="ownerId" label="业主id" align="center">
          </el-table-column>
          <el-table-column prop="carNum" label="车牌号" align="center">
          </el-table-column>
          <el-table-column prop="carBrand" label="品牌" align="center">
          </el-table-column>
          <el-table-column prop="carType" label="型号" align="center">
          </el-table-column>
          <el-table-column prop="carStatus" label="状态" align="center">
          </el-table-column>
          <el-table-column prop="inTime" label="入库时间" align="center">
          </el-table-column>
          <el-table-column prop="outTime" label="出库时间" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <t-button @click="updateRow(scope)" theme="primary" plain>更改</t-button>
              <el-popconfirm confirm-button-text='删除' cancel-button-text='不用了' icon="el-icon-info"
                             icon-color="red" title="确定删除吗？" @confirm="deleteRow(scope.$index,scope.row)">
                <t-button slot="reference" theme="primary" variant="outline" plain style="margin-left: 0">
                  删除
                </t-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <br/>
        <el-pagination background layout="prev, pager, next" :page-count="totalPage" :current-page.sync="currentPage"
                       @current-change="goPage()">
        </el-pagination>
        <el-dialog title="新增车辆信息" :visible.sync="show">
          <el-form :model="car">
            <el-form-item label="业主ID:" label-width="200px">
              <el-input v-model="car.ownerId" autocomplete="off" style="width: 300px"
                        placeholder="请输入业主ID"></el-input>
            </el-form-item>
            <el-form-item label="车牌号:" label-width="200px">
              <el-input v-model="car.carNum" autocomplete="off" style="width: 300px"
                        placeholder="请输入车牌号"></el-input>
            </el-form-item>
            <el-form-item label="品牌:" label-width="200px">
              <el-input v-model="car.carBrand" autocomplete="off" style="width: 300px"
                        placeholder="请输入品牌"></el-input>
            </el-form-item>
            <el-form-item label="型号:" label-width="200px">
              <el-input v-model="car.carType" autocomplete="off" style="width: 300px"
                        placeholder="请输入型号"></el-input>
            </el-form-item>
            <el-form-item label="状态:" label-width="200px">
              <el-select v-model="car.carStatus" placeholder="请选择" style="width: 200px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary" @click="addOrUpdate()">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改车辆信息" :visible.sync="show2">
          <el-form :model="car">
            <el-form-item label="车牌号:" label-width="200px">
              <el-input v-model="car.carNum" autocomplete="off" style="width: 300px"
                        placeholder="请输入车牌号"></el-input>
            </el-form-item>
            <el-form-item label="品牌:" label-width="200px">
              <el-input v-model="car.carBrand" autocomplete="off" style="width: 300px"
                        placeholder="请输入品牌"></el-input>
            </el-form-item>
            <el-form-item label="型号:" label-width="200px">
              <el-input v-model="car.carType" autocomplete="off" style="width: 300px"
                        placeholder="请输入型号"></el-input>
            </el-form-item>
            <el-form-item label="状态:" label-width="200px">
              <el-select v-model="car.carStatus" placeholder="请选择" style="width: 200px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="show2 = false">取 消</el-button>
            <el-button type="primary" @click="addOrUpdate()">确 定</el-button>
          </div>
        </el-dialog>
      </t-card>
    </t-card>
  </div>
</template>

<script>
import axios from "axios"
import {MessagePlugin} from "tdesign-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "cars",
  data() {
    return {
      //选择框
      options: [{
        value: 'y',
        label: '可用'
      }, {
        value: 'n',
        label: '不可用'
      }],
      //查询变量
      cars: [],
      show: false,
      show2: false,
      updateIndex: -1,
      car: {
        carId: "",
        ownerId: "",
        carNum: "",
        carBrand: "",
        carType: "",
        carStatus: ""
      },
      car2: {},
      //分页变量
      totalPage: 0,
      currentPage: 1,
      //新增变量
      time: {},
      addReturn: [],
    }
  },
  methods: {
    setTime() {
      console.log(this.time)
      axios.post("/api/admin/car/time", this.time)
          .then(res => {
            console.log(res)
            MessagePlugin.success('设置成功')
          })
      this.time = {};
    },

    addRow() {
      this.show = true;
      this.updateIndex = -1;
      this.car = {};
    },
    deleteRow(index, row) {
      axios.post("/api/admin/car/delete", row)
          .then(res => {
            console.log(res)
            MessagePlugin.success('删除成功')
          })
      this.cars.splice(index, 1);
      this.goPage();
    },
    updateRow(scope) {
      this.show2 = true;
      this.updateIndex = scope.$index;
      this.car = scope.row;
    },
    addOrUpdate() {
      if (this.updateIndex == -1) {
        let r = new Array();
        axios.post("/api/admin/car/add", this.car)
            .then(res => {
              r = res.data.list,
                  MessagePlugin.success('添加成功')
            })
        this.addReturn = r;
        this.carId = this.addReturn.carId;
        this.ownerId = this.addReturn.ownerId;
        this.goPage();
        this.car = {};
        this.show = false;
      } else {
        this.cars = this.cars.map((item, index) => {
          if (this.updateIndex === index) {
            return this.car
          }
          return item
        })
        axios.post("/api/admin/car/update", this.car)
            .then(res => {
              console.log(res)
              MessagePlugin.success('修改成功')
            })
        //vue底层数据劫持直接不能根据下标索引
        // this.cars[this.updateIndex] = this.car;
        this.car = {};
        this.show2 = false;
      }
    },
    findByCondition() {
      axios.post("/api/admin/car/findByCondition",
          this.car2
      )
          .then(res => {
            this.cars = res.data.data.list;
            this.totalPage = res.data.data.pages;
            MessagePlugin.success('查询成功')
          })
    },
    goPage() {
      let p = this.currentPage;
      axios.get("/api/admin/car/all", {
        params: {
          page: p
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.cars = res.data.data.list;
          this.totalPage = res.data.data.pages;
        }
      })
    },
  },
  mounted() {
    axios.get("/api/admin/car/all")
        .then(res => {
          if (res.data.code == 200 && res.data.data == null) {
            MessagePlugin.warning('暂无数据')
          } else {
            this.cars = res.data.data.list;
            this.totalPage = res.data.data.pages;
          }
        })
  }
}
</script>

<style>
</style>